<template>
  <div class="min-h-screen bg-light font-inter">
    <!-- 顶部导航栏 -->
    <!-- <header class="w-full z-50 bg-primary shadow-lg">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
            <span class="text-white font-bold text-xl">技术</span>
          </div>
          <span class="text-xl font-bold text-white">文档</span>
        </a>
        <nav class="flex items-center space-x-8">
          <a href="#" class="text-white hover:text-secondary transition-colors font-medium">技术文档</a>
        </nav>
      </div>
    </header> -->

    <!-- 技术文档瀑布流 -->
    <section class="py-16">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-2">精选 <span class="text-primary">技术文档</span></h2>
          <p class="text-muted">收录高质量技术文章，点击卡片可查看详情。</p>
        </div>
        <div class="columns-1 md:columns-2 lg:columns-3 gap-8 space-y-8">
          <div v-for="doc in docs" :key="doc.id" class="break-inside-avoid">
            <div
              class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group cursor-pointer"
              @click="goDetail(doc.filename, doc.type)"
            >
              <div class="relative h-56 flex items-center justify-center bg-primary/10">
                <span class="text-primary text-2xl font-bold">{{ doc.title }}</span>
                <div class="absolute top-4 left-4 bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">
                  {{ doc.category }}
                </div>
                <div v-if="doc.type === 'pdf'" class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full">PDF</div>
              </div>
              <div class="p-6">
                <div class="flex justify-between items-center mb-2">
                  <span class="text-sm text-muted">作者：{{ doc.author }}</span>
                  <span class="text-sm text-muted">更新时间：{{ doc.date }}</span>
                </div>
                <div class="flex justify-end">
                  <span class="text-primary font-medium">查看详情 <i class="fa-solid fa-arrow-right ml-1"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 自动导入docs下所有md和pdf文件
const mdFiles = import.meta.glob('/public//docs/*.md', { as: 'raw', eager: true })
const pdfFiles = import.meta.glob('/public//docs/*.pdf', { eager: true })
const docs = ref([])
const router = useRouter()

function parseMetaByFilename(filename) {
  const name = filename.replace(/\.(md|pdf)$/i, '')
  let category = '未分类'
  if (name.includes(' ')) {
    category = name.split(' ')[0]
  } else if (name.includes('教程')) {
    category = '教程'
  } else if (name.includes('源码')) {
    category = '源码'
  } else if (name.includes('Frida')) {
    category = '逆向工具'
  }
  return {
    title: name,
    category,
    author: '未知',
    date: '未知',
  }
}

onMounted(() => {
  const mdList = Object.keys(mdFiles).map((path, idx) => {
    const filename = path.split('/').pop()
    const meta = parseMetaByFilename(filename)
    return {
      id: 'md-' + idx,
      filename,
      ...meta,
      type: 'md',
    }
  })
  const pdfList = Object.keys(pdfFiles).map((path, idx) => {
    const filename = path.split('/').pop()
    const meta = parseMetaByFilename(filename)
    return {
      id: 'pdf-' + idx,
      filename,
      ...meta,
      type: 'pdf',
    }
  })
  docs.value = [...mdList, ...pdfList]
})

function goDetail(filename, type) {
  if (type === 'pdf') {
    router.push(`/pdf-viewer/${encodeURIComponent(filename)}`)
  } else {
    router.push(`/tech-docs/${encodeURIComponent(filename)}`)
  }
}
</script>

<style scoped>
.text-muted {
  color: #667085;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style> 